<template>
  <div>
    <content-header :title="artical.title"></content-header>
    <detail-info :detail="artical" :count="browNum"></detail-info>
    <pics-gallery v-if="artical.pictrues.length > 0" :pics="artical.pictrues"></pics-gallery>
    <div class="content-wrap" v-html="artical.content" v-loading="loading">
    </div>
  </div>
</template>
<script>
import contentHeader from "@/components/widge/content-header.vue";
import detailInfo from "@/components/widge/detail-info";
import imgBox from "@/components/widge/img-box";
import { getCollectionDetailBySid, addBrowseNum } from "@/api/detail";
import { getBrowseNum } from "@/api/detail";
import "lightgallery.js/dist/css/lightgallery.css";
import "lightgallery.js/dist/js/lightgallery.js";
import "@/plugin/lg-zoom.js";
import picsGallery from "@/components/widge/pics-gallery";

export default {
  data() {
    return {
      artical: {
        title: "",
        content: "请稍后...",
        pictrues: []
      },
      loading: true,
      browNum: 0
    };
  },
  components: {
    contentHeader,
    detailInfo,
    imgBox,
    picsGallery
  },
  methods: {
    getBrowseNum() {
      getBrowseNum(this.$route.params.id, 1).then(res => {
        this.browNum = res.data;
      });
    }
  },
  mounted() {
    getCollectionDetailBySid(this.$route.params.id).then(res => {
      this.loading = false;
      this.artical.content = res.data.introduction;
      this.artical.title = res.data.name;
      this.artical.pictrues = res.data.pictrues;
    });
    addBrowseNum(this.$route.params.id, 1);
    this.getBrowseNum();
  }
};
</script>

